<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>找回密码</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<style type="text/css">
			#forgetPwd_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-left: 6px;
				padding-top: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding: 12px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			.inputAndBtn {
				width: 94%;
				height: 55px;
				margin-left: 3%;
				margin-right: 3%;
				border: 1px solid #E9E9E9;
				border-radius: 8px;
				font-size: 0.9em;
			}
			#forgetPwd_main{
				padding-top: 70px;
			}
			#forgetPwd_main input {
				width: 100%;
				border: none;
				outline: none;
				height: 100%;
				border-radius: 8px;
				font-size: 1.3em;
				color: #CDCDCD;
				padding-left: 1em;
			}
			/*--找回按钮--*/
			
			.btnBottom {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				width: 100%;
				margin-top: 55px;
				/*position: fixed;*/
				text-align: center;
			}
			
			.mySearchName {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #0070B4;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.myCannotSearchName {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #DCDCDC;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			/*----验证提示----*/
			
			.yanzhengtishi {
				color: #FF0000;
				margin-top: 5px;
				text-align: left;
				height: 25px;
				font-size: 14px;
				width: 90%;
				margin: 0 auto;
			}
			
			.trueB {
				border-color: #0070B4 !important;
			}
			/*----密保问题段落----*/
			
			.questionPwd {
				/*border: 1px solid;*/
				color: #0070B4;
				text-align: left;
				height: 25px;
				font-size: 1.35em;
				font-family: "黑体";
				width: 90%;
				margin-left: 17px;
				margin-top: 15px;
				margin-bottom: 10px;
			}
			/*----提交按钮----*/
			
			.btnBottom {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				width: 100%;
				margin-top: 55px;
				/*position: fixed;*/
				text-align: center;
			}
			
			.myRegister {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #0070B4;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.mycannotRegister {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #DCDCDC;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			/*----添加提示边框----*/
			
			.wrongB {
				border-color: #FF0000 !important;
			}
			
			.trueB {
				border-color: #0070B4 !important;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="forgetPwd_main">
			<div class="index_head">
				<div class="app_head_left">
					<a href="javascript:history.go(-1)" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">找回密码</p>
				</div>
			</div>
			<div id="forgetPwd_mid">
				<div class="inputAndBtn mt50">
					<input type="text" id="yourUsername" placeholder="请输入您要找回的账号（手机号）" />
				</div>
				<p class="yanzhengtishi"></p>
				<div class="btnBottom">
					<a href="javascript:;" class="mySearchName" id="submitQus" style="display: none;">找&nbsp;&nbsp;回</a>
					<a href="javascript:;" class="myCannotSearchName" id="noSubmitQus">找&nbsp;&nbsp;回</a>
				</div>
			</div>
			<div id="forgetPwd_answer" style="display: none;">
				<!--密保问题1-->
				<p class="questionPwd" id="answer_MBWT1"></p>
				<div class="inputAndBtn">
					<input type="text" name="" id="ANS1" placeholder="请输入答案1" />
				</div>
				<!--密保问题2-->
				<p class="questionPwd" id="answer_MBWT2"></p>
				<div class="inputAndBtn">
					<input type="text" name="" id="ANS2" placeholder="请输入答案2" />
				</div>
				<!--提交按钮-->
				<div class="btnBottom">
					<a href="javascript:;" class="myRegister" id="submitAns" style="display: none;">提&nbsp;&nbsp;交</a>
					<a href="javascript:;" class="mycannotRegister" id="cannotSubmitAns">提&nbsp;&nbsp;交</a>
				</div>
			</div>
			<div id="forgetPwd_changePwd" style="display: none;">
				<!--输入新密码-->
				<p class="questionPwd" id="p_newPwd1">请输入新密码</p>
				<div class="inputAndBtn">
					<input type="password" name="" id="newPwdVal1" placeholder="请输入答案1" />
				</div>
				<p class="yanzhengtishi"></p>
				<!--重复密码-->
				<p class="questionPwd" id="p_newPwd2">重复密码</p>
				<div class="inputAndBtn">
					<input type="password" name="" id="newPwdVal2" placeholder="请输入答案2" />
				</div>
				<p class="yanzhengtishi"></p>
				<!--修改密码提交按钮-->
				<div class="btnBottom">
					<a href="javascript:;" class="myRegister" id="newPwdSubmit" style="display: none;">修&nbsp;&nbsp;改</a>
					<a href="javascript:;" class="mycannotRegister" id="cannotNewPwdSubmit">修&nbsp;&nbsp;改</a>
				</div>
			</div>
			<!--一个隐藏输入框 输入手机号调取后台成功后 存入此输入框 方便提交验证密保问题使用-->
			<input type="hidden" name="" id="hiddenYourUsername" value="" />
		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//验证找回账号输入框的信息
			$("#yourUsername").keyup(function() {
				var phone = /^[1][34578][0-9]{9}$/;
				var Input = $(this).parent();
				if(phone.test(this.value)) {
					Input.addClass("trueB");
					$("#noSubmitQus").hide();
					$("#submitQus").show(); //					document.getElementById("cannotregister").style.display = "none";
					//					document.getElementById("register").style.display = "block";
				} else {
					Input.removeClass("trueB");
					$("#submitQus").hide();
					$("#noSubmitQus").show();
				}
			});
			$("#submitQus").click(function() {
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "securityinfo",
						"USERNAME": $("#yourUsername").val()
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//						console.log(eval(data.DATA)[0].MBWT);
						if(data.MSG == "失败") {
							$.alert("您输入的手机号未注册", "提示", function() {
								//点击确定后执行的函数
								$("#yourUsername").val("");
								$(".inputAndBtn").removeClass("trueB");
							});
						} else {
							$("#hiddenYourUsername").val($("#yourUsername").val());
							//							console.log($("#hiddenYourUsername").val());
							$("#forgetPwd_mid").hide();
							$("#forgetPwd_answer").show();
							$("#answer_MBWT1").html(eval(data.DATA)[0].MBWT);
							$("#answer_MBWT2").html(eval(data.DATA)[0].MBWT1);
						}

					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});

			});
			$("#ANS1").keyup(function() {
				if($(this).val() != "" && $("#ANS2").val() != "") {
					$("#cannotSubmitAns").hide();
					$("#submitAns").show();
				} else {
					$("#submitAns").hide();
					$("#cannotSubmitAns").show();
				}
			});
			$("#ANS2").keyup(function() {
				if($(this).val() != "" && $("#ANS1").val() != "") {
					$("#cannotSubmitAns").hide();
					$("#submitAns").show();
				} else {
					$("#submitAns").hide();
					$("#cannotSubmitAns").show();
				}
			});
			$("#submitAns").click(function() {
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "back_password",
						"USERNAME": $("#hiddenYourUsername").val(),
						"MBWT": $("#answer_MBWT1").html(),
						"MBDA": $("#ANS1").val(),
						"MBWT1": $("#answer_MBWT2").html(),
						"MBDA1": $("#ANS2").val()
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						console.log(data);
						if(data.MSG == "失败") {
							$.alert("答案有误，找回失败", "提示", function() {
								$("#ANS1").val("");
								$("#ANS2").val("");
								$("#yourUsername").val("");
								$("#yourUsername").parent().removeClass("trueB");
								$("#submitQus").hide();
								$("#noSubmitQus").show();
								$("#forgetPwd_answer").hide();
								$("#forgetPwd_mid").show();
							});
						} else if(data.MSG == "成功") {
							$("#forgetPwd_answer").hide();
							$("#forgetPwd_changePwd").show();
						}
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			});
			//修改新密码
			var num1 = 0;
			var num2 = 0;
			function changeBlue() {
				if(num1 == 1 && num2 == 1) {
					$("#cannotNewPwdSubmit").css("display", "none");
					$("#newPwdSubmit").css("display", "block");
				} else {
					$("#newPwdSubmit").css("display", "none");
					$("#cannotNewPwdSubmit").css("display", "block");
				}
				//				console.log(num0 + "--" + num1 + "--" + num2 + "--" + num3);
			}
			//验证自定义密码
			$("#newPwdVal1").keyup(function() {
				var Pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/;
				var Input = $(this).parent();
				//重复密码框
				var nextInput = $("#newPwdVal2").val();
				if(Pwd.test(this.value)) {
					Input.removeClass("wrongB");
					Input.addClass("trueB");
					Input.next().html("");
					num1 = 1;
					//					document.getElementById("cannotregister").style.display = "none";
					//					document.getElementById("register").style.display = "block";
					if(nextInput == this.value) {
						$("#newPwdVal2").parent().removeClass("wrongB");
						$("#newPwdVal2").parent().addClass("trueB");
						num2 = 1;
					} else {
						$("#newPwdVal2").parent().removeClass("trueB");
						$("#newPwdVal2").parent().addClass("wrongB");
						num2 = 0;
					}
				} else {
					Input.removeClass("trueB");
					Input.addClass("wrongB");
					Input.next().html("请输入8-18位数字和英文字母作为您的密码");
					num1 = 0;
				}
				changeBlue();
			});
			//重复密码

			$("#newPwdVal2").keyup(function() {
				var Input = $(this).parent();
				var pwdFirst = Input.prev().prev().prev().children().val();
				if(this.value != pwdFirst) {
					Input.removeClass("trueB");
					Input.addClass("wrongB");
					num2 = 0;
				} else {
					var Pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/;
					if(!Pwd.test(this.value)) {
						Input.removeClass("trueB");
						Input.addClass("wrongB");
						num2 = 0;
					} else {
						//						Input.next().html("");
						Input.removeClass("wrongB");
						Input.addClass("trueB");
						num2 = 1;
					}
				}
				changeBlue();
			});
			//点击新密码修改按钮触发
			$("#newPwdSubmit").click(function(){
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "modify_password",
						"USERNAME": $("#hiddenYourUsername").val(),
						"NEWPASSWORD":$("#newPwdVal1").val()
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						if(data.MSG=="成功"){
							$.alert("新密码修改成功", "提示",function(){
								window.location.href="Login.html";
							});
						}
						
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			});
		</script>
	</body>

</html>